<template>
  <div>
    <div class="search-bar">
      <van-row>
        <van-col span="3">
          <img :src="locationIcon" class="location-icon" width="75%" alt="">
        </van-col>
        <van-col span="18">
          <input type="text" class="search-input" placeholder="请输入商品...">
        </van-col>
        <van-col span="2">
          <img :src="searchIcon" class="search-icon" width="90%" alt="">
        </van-col>
      </van-row>
    </div>
    <div class="menu">
        <ul v-for="(info ,index ) in infoArray" :key="index">
          <a :href="info.href"><li v-html="info.content"></li></a>
        </ul>
    </div>

    <div class="swiper-area">
      <van-swipe :autoplay="3000" >
        <van-swipe-item v-for="(banner ,index) in bannerImgArray" :key="index">
          <img width="100%" :src="banner['image']" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- type bar -->
    <div class="type-bar">
      <div class='box' v-for="(cate,index) in category" :key="index">
        <img v-lazy="cate.image" alt="">
        <span>{{cate.mallCategoryName}}</span>
      </div>
    </div>
    <!-- adBanner area-->
    <div class="adBannerImg">
      <img :src="adBanner" width="100%" alt="">
    </div>
    <div class="recommend-area">
      <div class="common-title">
        商品推荐
      </div>
      <div class="recommend-body">
        <swiper :options="swiperOption">
          <swiper-slide  v-for="(item,index) in recommendGoods" :key='index'>
              <div class="recommend-item">
                <img v-lazy="item.image" width="80%" alt="">
                <div class="goods">{{item.goodsName}}</div>
                <div class="price">￥{{item.price | moneyFilter}}<span>￥{{item.mallPrice+(3+Math.random()*5) | moneyFilter}}</span></div>
              </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- floor-area -->
    <floor-component :floorData="floor1" :floorTitle="floorTitle.floor1"></floor-component>
    <floor-component :floorData="floor2" :floorTitle="floorTitle.floor2"></floor-component>
    <floor-component :floorData="floor3" :floorTitle="floorTitle.floor3"></floor-component>
    <!-- hot-goods -->
    <div class="hot-area">
      <div class="hot-title">
        <div class="hot-goods">
          <span class="title">热卖商品</span>
          <van-list class="goods-list">
            <van-row>
              <van-col span="12" v-for="(item,index) in hotGoods" :key="index">
                <goods-component :goodsId    ="item.goodsId" 
                                 :goodsImage ="item.image"
                                 :goodsName  ="item.name"
                                 :goodsPrice ="item.price"
                ></goods-component>
              </van-col>
            </van-row>
            <span class="end">没有数据了</span>
          </van-list>
        </div> 
      </div>
      
    </div>
    
  </div>
  
</template>

<script>
import axios from 'axios'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import floorComponent from '../component/floorComponent'
import goodsComponent from '../component/goodsComponent'
import { toMoney } from '@/filter/moneyFilter.js'
import { URL }     from '@/servicesApi.config.js'
export default {
  data() {
    return {
      swiperOption:{
        slidesPerView:3,
        slidesPerGroup : 3
      },
      msg: 'Shopping Mall',
      locationIcon: require('../../assets/images/gps.png'),
      searchIcon: require('../../assets/images/search1.png'),
      bannerImgArray: [],
      infoArray: [
        {content:'👉 双12购物满3笔，有机会抽奖赢取百元现金' ,href:'https://m.baidu.com'},
        {content:'🎁 显卡大降价，搭配主机套装最高省1299元' ,href:'https://m.mi.com/'},
        {content:'🍓 草莓季来临，健康实惠，不添加人工色素' ,href:'https://m.jd.com'}
      ],
      category: [],
      adBanner: '',
      recommendGoods:[],
      floor1: [],
      floor2: [],
      floor3: [],
      floorTitle:{},
      hotGoods: []
    }
  },
  methods: {
    haha(){
      (function(){
        alert('aa')
      }())
    }
  },
  created(){
    axios({
      url:URL.getShoppingMallInfo,
      method:'get',
    })
    .then(response=>{
      // eslint-disable-next-line no-console
      console.log(response);
      if (response.status==200) {
        this.category       = response.data.data.category;
        this.adBanner       = response.data.data.advertesPicture.PICTURE_ADDRESS;
        this.bannerImgArray = response.data.data.slides;
        this.recommendGoods = response.data.data.recommend;
        this.floor1         = response.data.data.floor1;
        this.floor2         = response.data.data.floor2;
        this.floor3         = response.data.data.floor3;
        this.floorTitle     = response.data.data.floorName;
        this.hotGoods       = response.data.data.hotGoods;
      }
    })
    .catch(error=>{
      // eslint-disable-next-line no-console
      console.log(error)
    })
  },
  filters:{
    moneyFilter(money){
      return toMoney(money)
    }
  },
  components:{
    swiper,
    swiperSlide,
    floorComponent,
    goodsComponent
  }
}
</script>
  
<style lang="scss" scoped>
  $main-color : #e5017e;
  $light-font : #999;
  $dark-font  : #333;
  $bgc        : #e9e4e4;
  .search-bar{
    height: 2.2rem;
    /* background-color:#e5017d ; */
    background-color:$main-color;
    line-height: 2.2rem;
    overflow: hidden;
  }
  .search-input{
    width: 90%;
    margin-left: .8rem;
    height: 1.4rem;
    border: none;
    border-bottom: 1px solid white;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    margin-top: 0rem;
    background-color:transparent;   
    color: white;
    font-size: .8rem;
    text-indent: .1rem;
    &::placeholder{
    /* text-indent: .1rem; */
    font-size: .8rem;
    color: #ccc;
    }
  }
  .search-icon{
    font-size:10px;
    padding: .3rem;
    margin-top: .1rem;
  }
  .location-icon{
    padding: .2rem .1rem .1rem .6rem;
  }
  .swiper-area{
    clear: both;
    max-height: 12rem;
    overflow: hidden;
    /* box-shadow:10px -0.2rem 3rem 2rem #eaeaea */
  }
  .menu{
    width: 100%;
    color: $dark-font;
    font-size: .7rem;
    height: 1.15rem;
    overflow: hidden;
    position: inherit;
    text-align: center;
  }
  .menu ul{
    animation: move 18s ease infinite;
    display: block;
    background-color: #ffffd8;
    li{
    display: block;
    height: 1.2rem;
    text-align: left;
    text-indent: 3rem;
    color: $light-font;
    }   
  }  
  
  @keyframes move {
    0%,83.5%,100%{
      transform: translate3d(0,0,0rem);
    }
    8.5%,25%,58.5%,75%{
      transform: translate3d(0,-1.2rem,0);
    }
    33.5%,50%{
      transform: translate3d(0,-2.4rem,0);
    }
  }

  .type-bar{
    background-color: #fff;
    font-size: 12px;
    display: flex;
    flex-wrap: nowrap;
    margin:1px 3px;
    width: 98%;
    padding:0px 2px;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    border-radius: 5px;
    .box{
    flex: 20%;
    text-align: center;
    padding: .2rem .1rem .15rem .1rem;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
      img{
      width: 80%;
      }
      span{
      display: block;
      line-height: 14px;
      }
    }
  }
  
  .recommend-area{
    background-color: #fff;
    margin-top: .1rem;
  }
  .common-title{
    border-left: 5px solid ;
    background-color: #fbfbfb;
    font-size: 16px;
    padding:.2rem;
    color:$main-color;
  }
  .common-title.margin-header{
    margin-top:.5rem;
  }
  .recommend-body{
    border-bottom: 1px solid #fafafa;
    .recommend-item{
      width: 99%;
      border-right: 1px solid #fafafa;
      box-shadow: 1px 1px 1px 1px #fafafa;
      text-align: center;
      font-size: 12px;
    }
    .goods{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      box-sizing: border-box;
      -webkit-box-sizing:border-box;
      padding: .2rem;
    }
    .price span{
      text-decoration: line-through;
      font-size: 10px;
      color:$light-font;
      padding-left: .2rem;
    }
  }
  .adBannerImg{
    margin-top:.2rem;
  }
  .hot-area{
    text-align: center;
    height: 1.8rem;
    line-height: 1.8rem;
    font-size: 14px;
  }
  .goods-list{
    background: #fff;
    padding-bottom: 3rem;
  }
  .hot-goods .title{
    font-size: 18px;
    display: block;
    box-sizing: border-box;
    padding: 5px;
    color: #333;
    text-shadow: 2px 0px 3px #ccc;
    margin-top: .5rem;
    background-color: #f9f9f9;
  }
  span.end{
    color: #999;
  }
</style>
